<template>
  <div class="verify">
    <div>
      <span>手机号：</span>
      <input v-model="mobile" placeholder="请输入手机号" type="text" />
    </div>
    <div>
      <span>验证码：</span>
      <input
        class="verifyInput"
        v-model="verifyValue"
        placeholder="请输验证码"
        type="text"
      />
      <button :disabled="verifyFlag" @click="handleCountDown">
        <span v-if="countFlag">发送倒计时</span>
        <span v-else>倒计时{{ num }}</span>
      </button>
    </div>
    <button :disabled="loginDisabled" @click="handelLogin">登录</button>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      mobile: "",
      num: 5,
      countFlag: true,
      timer: null,
      loginDisabled: true,
      verifyFlag: false, // 验证码按钮禁用
      verifyCode: "", // 随机生成6位数字
      verifyValue: "", // 验证按码输入的值
    };
  },
  mounted() {},
  methods: {
    // 发送倒计时
    handleCountDown() {
      if (!this.mobile) {
        Toast.success("你还没有输入手机号");
        return;
      }
      let mobile = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
      if (mobile.test(this.mobile)) {
        Toast.success("发送成功注意查收");
        this.verifyFlag = true; // 验证按按钮禁用
        this.countFlag = false;
        this.timer = setInterval(() => {
          if (this.num <= 0) {
            this.countFlag = true;
            this.loginDisabled = false;
            this.verifyFlag = false; // 验证码按钮可以点击
            clearInterval(this.timer);
            this.verifyCode = Math.random() // 随机生成6位数字
              .toFixed(6)
              .slice(-6);
            alert("验证码看控制台  --验证码" + this.verifyCode);
            console.log(this.verifyCode);
          } else {
            this.num--;
          }
        }, 1000);
      } else {
        Toast.success("你的手机号格式不正确");
        return;
      }
    },
    // 登录
    handelLogin() {
      if (this.verifyValue == this.verifyCode) {
        this.mobile = "";
        Toast.success("登录成功");
        this.$router.push({ path: "Wishing" });
      } else {
        Toast.success("验证码无效");
      }
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.verify {
  width: 100%;
  height: 15rem;
  margin: auto;
  margin-top: 15.375rem;
  padding: 40px 0 0 60px;
  .verifyInput {
    width: 100px;
    height: 20px;
  }
}
</style>
